<template>
	<view>
	<!-- 	轮播图区域 -->
    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
      <!-- 循环渲染轮播图的 item 项 -->
      <swiper-item v-for="(item, i) in swiperList" :key="i">
        <navigator class="swiper-item" :url="'/subpkg/goods_detail/goods_detail?goods_id='+item.goods_id">
          <!-- 动态绑定图片的 src 属性 -->
          <image :src="item.image_src" mode="widthFix"></image>
        </navigator>
      </swiper-item>
    </swiper>
	<view class="nav_list">
		<view class="nav_item" v-for="(item,i) in navList" :key="i" @click="navClickHandler(item)">
			<image :src="item.image_src" mode="widthFix"></image>
			
		</view>
		
	</view>
	
	<view class="floor-list">
		<view class="floor-item" v-for="(item,i) in flooList" :key="i">
			
			<image :src="item.floor_title.image_src" mode="" class="floor-title"></image>
			<view class="f-floor">
				
			<navigator class="left_follr" :url="item.product_list[0].url">
				<image :src="item.product_list[0].image_src" :style="{width:item.product_list[0].image_width+'rpx'}" mode="widthFix"></image>
			</navigator> 	
			
			
			<view class="right_follr">
				<navigator v-for="(item2,i2) in item.product_list" :key="i2" v-if="i2 !==0" :url="item2.url">
					
					<image :src="item2.image_src" mode="widthFix" :style="{width: item2.image_width + 'rpx'}"></image>
					
				</navigator>
				
			</view>
			
			</view>
			
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//这是轮播图的数据列表
				swiperList:[],
				navList:[],
				flooList:[]
				
			};
		},
		onLoad() {
			
			this.getSwiperList(),
			this.getNivList(),
			this.getflooList()
			
		},
		methods:{
			async getSwiperList(){
				const {data:res}= await uni.$http.get('/api/public/v1/home/swiperdata')
				if(res.meta.status !==200) return uni.$showMsg()
				this.swiperList=res.message
				
				uni.$showMsg('数据请求成功')			
			
				
			},
			async getNivList(){
				const {data:res} = await uni.$http.get('/api/public/v1/home/catitems')
				
				if(res.meta.status !==200) return uni.$showMsg()
				this.navList=res.message
			},
			navClickHandler(item){
				if(item.name==='分类'){
				uni.switchTab({
					url:'/pages/cate/cate'
				})}else if(item.name==='秒杀拍'){
				uni.switchTab({
					url:'/pages/my/my'
				})}
			},
			async getflooList(){
			const {data:res} = await uni.$http.get('/api/public/v1/home/floordata')
			
			if(res.meta.status !==200) return uni.$showMsg()
			
			  res.message.forEach(floor => {
			    floor.product_list.forEach(prod => {
			      prod.url = '/subpkg/goods_list/goods_list?' + prod.navigator_url.split('?')[1]
			    })
			  })
			
			this.flooList=res.message
				
			}
		},
		
		}
		
</script>

<style lang="scss">
	
	swiper{
		width: 100%;
		height: 330rpx;
		.swiper-item,image{
			width: 100%;
			height: 100%;
			
		}
	}
	.nav_list{
		width: 100%;
		margin-top: 20rpx;
		border: 1px solid red;
		display: flex;
		justify-content:space-around;
		.nav_item{
			width: 15%;
			image{
				width: 100%;
				
			}
		}
	}
	.floor-title {
	  height: 60rpx;
	  width: 100%;
	  display: flex;
	}
	.right_follr{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-evenly;
		
	}
	.f-floor{
		display: flex;
	}
	.left_follr{
		padding-left: 10rpx;
	}
</style>
